<template>
	<view class="sweep-light" 
		:style="{'--light_h':light_h, '--light_l':light_l, '--light_t':light_t, '--light_w':lightW+'rpx', width:iconW+'rpx', height:iconH+'rpx'}"
	>
		<view style="width: 100%;height: 100%;"><slot></slot></view>
	</view>
</template>

<script>
	export default {
		props: {
			lightW: {
				type: String,
				default: '30'
			},
			iconW: {
				type: String,
				default: '200'
			},
			iconH: {
				type: String,
				default: '200'
			},
		},
		data() {
			return {
				
			}
		},
		computed: {
			light_h: function () {
				return Number(this.iconW) + Number(this.iconH) + 'rpx'
			},
			light_l: function () {
				return (this.iconW - this.lightW)/2 + 'rpx'
			},
			light_t: function () {
				return -this.iconW/2 + 'rpx'
			},
		},
	}
</script>

<style scoped lang="scss">
	.sweep-light {
		overflow: hidden;
		position: relative;
	}
	.sweep-light:before {
		content: "";
		position: absolute;
		width: var(--light_w);
		height: var(--light_h);
		background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, .5), transparent);
		left: var(--light_l);
		top: var(--light_t);
		animation: searchLights 6s ease-in infinite;
	}
	
	@keyframes searchLights {
		0% { transform: rotate(45deg) translate(-200rpx, 0rpx); }
		80% { transform: rotate(45deg) translate(-200rpx, 0rpx); }
		100% { transform: rotate(45deg) translate(200rpx, 0rpx); }
	}
</style>